<template>
  <div class="header">
    <div class="header-content">
      <div class="logo">
        <img src="../assets/images/logo.png" alt="logo" />
      </div>
      <el-menu
        :default-active="$route.path"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#fff"
        text-color="#333333"
        active-text-color="#6495ed"
      >
        <el-menu-item index="/home">首页</el-menu-item>
        <el-submenu index="100">
          <template slot="title">课程大厅</template>
          <el-menu-item
            ><a href="http://px.evo.eceping.net/Home/wuhan" target="_blank"
              >建筑安管人员（ABC证)继教</a
            ></el-menu-item
          >
          <el-menu-item
            ><a href="http://px.evo.eceping.net/Home/wuhan" target="_blank"
              >特种作业人员继教</a
            ></el-menu-item
          >
          <el-menu-item
            ><a href="https://bdy.kq.eceyun.net/#/login" target="_blank"
              >建筑七大员新考</a
            ></el-menu-item
          ><el-menu-item
            ><a href="https://bdy.eceyun.net/#/login" target="_blank"
              >建筑七大员继教</a
            ></el-menu-item
          >
        </el-submenu>
        <el-submenu index="/technical">
          <template slot="title">职业培训</template>
          <el-menu-item index="/technical/training1"
            >建筑安管人员(ABC证)新考和继教</el-menu-item
          >
          <el-menu-item index="/technical/training2"
            >建筑特种工新考及继教</el-menu-item
          >
          <el-menu-item index="/technical/training3"
            >建筑七大员新考及继教</el-menu-item
          >
          <el-menu-item index="/technical/training4"
            >建筑技能工新考及继教</el-menu-item
          >
          <el-menu-item index="/technical/training5"
            >水利安管人员（ABC证）新考及继教</el-menu-item
          >
          <el-menu-item index="/technical/training6"
            >水利五大员新考及继教</el-menu-item
          >
          <el-menu-item index="/technical/training7"
            >公路安管人员(ABC证)新考和继教</el-menu-item
          >
          <el-menu-item index="/technical/training8"
            >公路施工员、公路养护工新考</el-menu-item
          >
          <el-menu-item index="/technical/training9"
            >安监特种工新考及继教</el-menu-item
          >
          <el-menu-item index="/technical/training10"
            >其他建设行业证书新考及继教</el-menu-item
          >
        </el-submenu>
        <el-submenu index="/production">
          <template slot="title">服务产品</template>
          <el-menu-item index="/production/pro1">建筑企业资质资讯</el-menu-item>
          <el-submenu index="/production/pro2">
            <template slot="title">
              <span>成人学历提升</span>
            </template>
            <el-menu-item index="/production/pro2">网教</el-menu-item>
            <el-menu-item index="/production/pro6">成教</el-menu-item>
            <el-menu-item index="/production/pro7">国家开放大学</el-menu-item>
            <el-menu-item index="/production/pro8">同等学力硕士</el-menu-item>
          </el-submenu>
          <el-menu-item index="/production/pro3"
            >职业教育云平台开发与运维</el-menu-item
          >
        </el-submenu>
        <el-menu-item index="/information">行业资讯</el-menu-item>
        <el-menu-item index="/notification">通知公告</el-menu-item>
        <!-- <el-submenu index="/aboutUs">
          <template slot="title">关于我们</template>
          <el-menu-item index="/aboutUs/index1">企业介绍</el-menu-item>
          <el-menu-item index="/aboutUs/index2">招贤纳士</el-menu-item>
          <el-menu-item index="/aboutUs/index3">关于我们</el-menu-item>
        </el-submenu> -->
        <el-submenu index="/aboutUs">
          <template slot="title">关于我们</template>
          <el-menu-item index="/aboutUs#jieshao">企业介绍</el-menu-item>
          <el-menu-item index="/aboutUs#zhaoxian">招贤纳士</el-menu-item>
          <el-menu-item index="/aboutUs#guanyu">关于我们</el-menu-item>
        </el-submenu>
        <!-- <el-menu-item index="/aboutUs">关于我们</el-menu-item> -->
      </el-menu>

      <div class="hearder-login" v-if="isLogin" @click="login">登录</div>
      <div class="toManage" v-else>企业后台</div>
      <el-popover
        v-if="!isLogin"
        placement="bottom"
        width="130"
        trigger="hover"
      >
        <div class="popover_title">湖北建云教育科技有限公司</div>
        <div class="popover_btn" @click="loginOut">退出登录</div>
        <img
          slot="reference"
          style="width: 26px; height: 26px; margin-top: 10px"
          src="../assets/images/userLogined.png"
          alt=""
        />
      </el-popover>
      <div class="hearder-tel_Icon">
        <img
          style="width: 24px; height: 24px"
          src="../assets/images/tel-icon.png"
          alt=""
        />
      </div>
      <div class="hearder-tel_number">027-88888888</div>
    </div>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="380px"
      :show-close="false"
      align="center"
      class="main_dia"
      :modal-append-to-body="false"
    >
      <div class="loginDia_title">登录</div>
      <div class="crossLine"></div>
      <div class="login_fa">
        <!-- <img class="userIcon_position" src="../assets/images/user.png" alt="" /> -->
        <el-input
          class="login_input"
          style="width: 260px"
          placeholder="请输入用户名"
          clearable
          @focus="getFocusUser"
          @blur="getBlurUser"
          :prefix-icon="
            userType == 0 ? 'el-icon-login-user' : 'el-icon-login-user_active'
          "
          v-model="loginForm.empUname"
        >
        </el-input>
      </div>
      <div class="lock_fa">
        <!-- <img class="lockIcon_position" src="../assets/images/lock.png" alt="" /> -->
        <el-input
          class="login_input"
          style="width: 260px"
          clearable
          @focus="getFocusLock"
          @blur="getBlurLock"
          placeholder="请输入密码"
          :prefix-icon="
            lockType == 0
              ? 'el-icon-login-password'
              : 'el-icon-login-password_active'
          "
          v-model="loginForm.empUpass"
        >
        </el-input>
      </div>
      <el-button
        style="width: 260px; height: 40px; margin-top: 29px"
        type="primary"
        @click="submit_login"
        >登录</el-button
      >
    </el-dialog>
  </div>
</template>

<script>
import { loginIn, loginOut } from "@/api/login.js";
export default {
  data() {
    return {
      isLogin: true,
      activeIndex: "/home",
      dialogVisible: false,
      form: {},
      userType: 0,
      lockType: 0,
      loginForm: {
        empUname: "",
        empUpass: "",
        entpId: "170",
      },
    };
  },
  created() {
    if (localStorage.getItem("tokenId")) {
      this.isLogin = false;
    }
  },
  methods: {
    getFocusUser() {
      this.userType = 1;
    },
    getBlurUser() {
      this.userType = 0;
    },
    getFocusLock() {
      this.lockType = 1;
    },
    getBlurLock() {
      this.lockType = 0;
    },
    handleSelect(key, keyPath) {
      this.$router.push({
        path: key,
        params: { data: "query" },
      });
    },
    //退出登录
    loginOut() {
      this.$confirm("是否确认退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = {
            tokenId: localStorage.getItem("tokenId"),
          };
          loginOut(params).then((res) => {
            if (res.success) {
              localStorage.removeItem("tokenId");
              this.isLogin = true;
              this.$message({
                type: "success",
                message: "注销成功!",
              });
            }
          });
        })
        .catch(() => {});
    },
    // 登录弹窗显示
    login() {
      this.dialogVisible = true;
    },
    // 登录按钮
    submit_login() {
      if (this.loginForm.empUname == "") {
        this.$message({
          message: "请输入用户名",
          type: "warning",
        });
        return false;
      }
      if (this.loginForm.empUpass == "") {
        this.$message({
          message: "请输入密码",
          type: "warning",
        });
        return false;
      }
      let params = this.loginForm;
      loginIn(params).then((res) => {
        console.log(res);
        if (res.success) {
          this.$message({
            message: "登录成功",
            type: "success",
          });
          this.dialogVisible = false;
          this.isLogin = false;
          localStorage.setItem("tokenId", res.data.tokenId);
        }
      });
    },
  },
};
</script>

<style lang="scss">
.popover_title {
  width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popover_btn {
  width: 80px;
  height: 24px;
  margin: auto;
  border-radius: 12px;
  line-height: 24px;
  color: #999;
  background-color: #fff;
  text-align: center;
  border: 1px solid #ccc;
  margin-top: 15px;
  cursor: pointer;
}
.toManage {
  cursor: pointer;
}
.el-icon-login-user_active {
  background: url(../assets/images/user_active.png) center no-repeat;
  background-size: 16px 18px;
}
.el-icon-login-user {
  background: url(../assets/images/user.png) center no-repeat;
  background-size: 16px 18px;
}
.el-icon-login-user:before {
  content: "\66ff";
  font-size: 16px;
  visibility: hidden;
}
.el-icon-login-password_active {
  background: url(../assets/images/lock_active.png) center no-repeat;
  background-size: 16px 18px;
}
.el-icon-login-password {
  background: url(../assets/images/lock.png) center no-repeat;
  background-size: 16px 18px;
}
.el-icon-login-password:before {
  content: "\66ff";
  font-size: 16px;
  visibility: hidden;
}
.login_fa {
  position: relative;
}
.userIcon_position {
  position: absolute;
  left: 5px;
  top: 10px;
  width: 16px;
  height: 18px;
}
.lock_fa {
  position: relative;
}
.lockIcon_position {
  position: absolute;
  left: 5px;
  top: 10px;
  width: 16px;
  height: 18px;
}
.login_input {
  height: 40px;
  margin-bottom: 20px;
}
.crossLine {
  width: 260px;
  height: 1px;
  background-color: #cbcbcb;
  margin: auto;
  margin-top: 19px;
  margin-bottom: 30px;
}
.loginDia_title {
  font-size: 24px;
  color: #2590f4;
  text-align: center;
  font-weight: bold;
  margin-top: -30px;
}
.header {
  position: fixed;
  width: 100%;
  height: 60px;
  margin: 0 auto;
  background: #fff;
  z-index: 333;
  .header-content {
    position: fixed;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1200px;
    height: 60px;
    z-index: 999;
    margin: 0 auto;

    .logo {
      width: 120px;
      height: 45px;
      img {
        width: 100%;
      }
    }
    .el-menu {
      text-align: right;
      width: auto;
      color: #333333;
    }
  }
  .hearder-login {
    width: 48px;
    height: 24px;
    line-height: 24px;
    background-color: #fff;
    color: #2590f4;
    font-size: 14px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #2590f4;
    font-weight: Regular;
    cursor: pointer;
  }
  .hearder-tel_Icon {
    width: 24px;
    height: 24px;
  }
  .hearder-tel_number {
    margin-left: -20px;
  }
}
</style>
